<template>
	<view class="lucky_plaza">
		<view v-if="!isAll" class="title" @click="goTaskList">--{{item.name}}--</view>
		<view class="content">
			<view @click="goDetail(d.t_id)" v-for="(d, index) in taskList" :key="index" class="good_item mb20"
				:class="{'mr20': index%2==0}">
				<view class="pricebox c_fff f24" :style="'background-image: url(' + pricebox_bg + ')'">
					¥2333
				</view>
				<view class="goodimg goodbox">
					<image class="goodimg" :src="d.photo" mode=""></image>
				</view>
				<view class="textcenter otw p10 pt20 f24 c_000">
					{{d.text}}
				</view>
				<view class="textcenter otw c_868686 f22 pb15 pr10 pl10">
					{{d.msg}}
				</view>
				<view class="bg_linear c_fff f26 flexcenter drawbox">
					参与抽奖
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		props: ["item", "isAll", "end"],
		data() {
			return {
				pricebox_bg: `${uni.imgPath}/upload/h5/home/7.png`
			}
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: `/pagesTask/tastDetail/index?tastId=${id}`
				})
			},
			goTaskList() {
				if (!this.isAll) {
					uni.navigateTo({
						url: `/pagesTask/taskList/index?id=${this.item.id}`
					})
				}
			}
		},

		computed: {
			taskList: function() {

				if (this.isAll) {
					return this.item.task_list
				} else {
					var end = this.end ? this.end : 4;
					var arr = this.item.task_list.slice(0, end)
					return arr
				}


			}
		}
	}
</script>
<style lang="scss" scoped>
	.lucky_plaza {
		margin-top: 20rpx;

		.title {
			text-align: center;
			color: #3C95F5;
			font-weight: bold;
			font-size: 28rpx;
		}

		.content {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			justify-content: space-between;


		}
	}

	.good_item {
		width: 342rpx;
		height: 446rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;

		.pricebox {
			position: absolute;
			top: 16rpx;
			right: 2rpx;
			height: 40rpx;
			line-height: 40rpx;
			width: 124rpx;

			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			padding-left: 18rpx;

			&::before {
				content: '';
				height: 1rpx;
				background-color: #fff;
				position: absolute;
				top: 24rpx;
				left: 10rpx;
				z-index: 1;
				width: 70%;

			}

			&::after {
				content: '';
				height: 1rpx;
				background-color: #fff;
				position: absolute;
				bottom: 24rpx;
				left: 10rpx;
				z-index: 1;
				width: 70%;
			}
		}

		.goodimg {
			width: 100%;
			height: 260rpx;
		}

		.drawbox {
			width: 200rpx;
			border-radius: 44rpx;
			height: 52rpx;
			line-height: 52rpx;
			margin: 0 auto;
		}
	}
</style>